<template>
	<view class="main">
		<view class="main_top">
			<uv-status-bar></uv-status-bar>
			<!-- logo -->
			<view class="main_top_logo">
				<image :src="`${base.PHPimgUrl}logo.png`" mode="heightFix" />
			</view>
			<!-- 日期 -->
			<view class="main_time">
				<scroll-view class="main_time_left" scroll-x="true" :scroll-left="0">
					<view class="main_time_left_item" v-for="(item, index) in tabData" :key="index"
						@click="handleCheckdTime(item.value, index)">
						<view :class="{ active: currentTab === index }" :style="{ marginRight: '32rpx' }">
							{{ item.name }}
						</view>
					</view>
				</scroll-view>
				<view class="main_time_right">
					<text style="color: #fff; width: 4rpx; overflow: hidden">|</text>
					<view @click="filtrate = true">
						<text class="time_right_text">筛选</text>
						<image class="time_right_img" :src="`${base.PHPimgUrl}ic_arrow_bottom.png`" mode="heightFix" />
					</view>
				</view>
			</view>
		</view>
		<!-- 数据展示 -->
		<view class="main_card">
			<dx-home-card :statInfo="statInfo"></dx-home-card>
		</view>
		<view class="main_body">
			<!-- 板块 -->
			<view class="main_plate">
				<view class="main_plate_item" v-for="(item, index) in plateList" :key="index"
					@click="handleSkip(item.link)">
					<image :src="item.img" class="main_plate_img" mode="heightFix"></image>
					<text class="main_plate_text">{{ item.text }}</text>
				</view>
			</view>
			<!-- 订单列表 -->
			<view v-if="userInfo_Store.isLogin">
				<block v-if="orderList.length">
					<view class="main_list" v-for="(item, key) in orderList" :key="key" @click="handleShopDetail(item)">
						<view class="main_list_top">
							<view class="left">
								<image class="left_img"
									:src="item.isGoods ? item.cover : `${base.PHPimgUrl}shop_show.png`"
									mode="heightFix" />
							</view>
							<view class="right">
								<view class="right_title">
									<view class="text">{{ item.isGoods ? item.title : '用卷卷，选品更轻松爆单更容易' }}</view>
									<image class="img"
										:src="`${base.PHPimgUrl}${item.isGoods ? 'eye-fill' : 'eye-close'}.png`"
										mode="heightFix" @click.stop="handleGoodsToggle(item, key, 'goods')"></image>
								</view>
								<view class="right_content">
									<text class="time">{{ item.paySuccessTime }} 付款</text>
									<view class="tags">
										<block v-for="(i, k) in orderType" :key="k">
											<view class="tags_item" v-if="i.name === item.flowPoint"
												:style="{ color: i.color, backgroundColor: i.bgColor }">
												{{ i.text }}
											</view>
										</block>
									</view>
								</view>
							</view>
						</view>
						<view class="main_list_center">
							<view class="list_item">
								<image class="img" :src="`${base.PHPimgUrl}wallet-check.svg`" mode="heightFix"></image>
								<text class="text">付款金额</text>
								<text class="money">￥{{ item.totalPayAmount }}</text>
							</view>
							<view class="list_item" style="margin: 0 16rpx">
								<image class="img" :src="`${base.PHPimgUrl}percentage-square.svg`" mode="heightFix">
								</image>
								<text class="text">佣金率</text>
								<text class="money">{{ item.kolCosRatio }}%</text>
							</view>
							<view class="list_item">
								<image class="img" :src="`${base.PHPimgUrl}wallet-add.svg`" mode="heightFix"></image>
								<text class="text">佣金收入</text>
								<text class="money">￥{{ item.kolCosFee }}</text>
							</view>
						</view>
						<view class="main_list_bottom">
							<view class="left">
								<image class="img"
									:src="item.isStore ? item.authorAvatar : `${base.PHPimgUrl}shop_hide.png`"
									mode="heightFix" />
								<text class="text">{{ item.isStore ? item.authorAccount : '账号信息已隐藏' }}</text>
							</view>
							<view class="right">
								<image class="img"
									:src="`${base.PHPimgUrl}${item.isStore ? 'eye-fill' : 'eye-close'}.png`"
									mode="heightFix" @click.stop="handleGoodsToggle(item, key, 'store')"></image>
							</view>
						</view>
					</view>
				</block>
				<view v-else class="no-data">
					<image :src="base.PHPimgUrl + 'no-data.png'" />
					暂无数据
				</view>
			</view>
			<view v-else class="bottom-no-login">当前为示例数据，登录后可正常查看</view>
		</view>
	</view>
	<!-- 筛选弹窗 -->
	<view class="mask" v-show="filtrate" @click="handleReset" @touchmove.stop>
		<view class="mask_body" @click.stop>
			<view class="mask_body_title">时间</view>
			<view class="mask_body_line">
				<view v-for="(item, index) in times" :key="index" class="btn" :class="{ active: item.active }"
					@click="handleTimes(index)">
					{{ item.label }}
				</view>
			</view>
			<view class="mask_body_title">订单状态</view>
			<view class="mask_body_line">
				<view v-for="(item, index) in orderArr" :key="index" class="btn" :class="{ active: item.active }"
					@click="handleOrderState(index)">
					{{ item.label }}
				</view>
			</view>
			<view class="mask_body_name">
				<text class="left">账号</text>
				<view class="right" @click="handleAccount">
					<image class="img avatar" v-if="userInfo_Store.userInfo.avatar"
						:src="userInfo_Store.userInfo.avatar" mode="heightFix" />
					<text>{{ userInfo_Store.userInfo.nickName || '全部账号' }}</text>
					<image class="img" :src="base.PHPimgUrl + 'arrow-circle-right.png'" mode="heightFix" />
				</view>
			</view>
			<view class="mask_body_btns">
				<view class="btn" @click="handleReset">重置</view>
				<view class="btn active" @click="handleConfirm">确定</view>
			</view>
		</view>
	</view>
	<!-- 用户提示弹窗 -->
	<view class="mask" v-if="isHint">
		<view class="mask_warpper">
			<image class="mask_body_top" :src="`${base.PHPimgUrl}homeTop.svg`" mode="widthFix"></image>
			<image class="mask_body_bg" :src="`${base.PHPimgUrl}homeBg.png`" mode="widthFix"></image>
			<view class="mask_body_btn" @click="handleHint">我知道了</view>
		</view>
	</view>

	<dx-tabBar :selectedIndex="0"></dx-tabBar>
</template>

<script setup>
	import api from '@/common/api.js';
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		useUserinfoStore
	} from '@/stores/userInfo';
	// import { GetEquipmentInformat } from '@/hooks/GetInfoSyncHook.js';
	import base from '@/common/baseURL.js';
	const userInfo_Store = useUserinfoStore();
	// const { iStatusBarHeight } = GetEquipmentInformat();
	//默认今天的值
	const chooseType = ref('5');
	//默认今天的下标
	const currentTab = ref(0);
	//分页数据
	const paging = {
		pageNum: 1,
		pageSize: 10
	};
	let loading = false;
	const filtrate = ref(false);
	// 订单状态
	const tabData = [{
			id: 0,
			name: '今天',
			value: '5'
		},
		{
			id: 1,
			name: '昨日',
			value: '4'
		},
		{
			id: 2,
			name: '近7日',
			value: '2'
		},
		{
			id: 3,
			name: '近30日',
			value: '3'
		},
		{
			id: 4,
			name: '本月',
			value: '6'
		},
		{
			id: 5,
			name: '上月',
			value: '7'
		}
	];
	let orderStatus = 'all';
	const orderArr = ref([{
			label: '全部订单',
			active: true,
			value: 'all'
		},
		{
			label: '已支付订单',
			active: false,
			value: 'PAY_SUCC'
		},
		{
			label: '退款/退款订单',
			active: false,
			value: 'REFUND'
		},
		{
			label: '已结算订单',
			active: false,
			value: 'SETTLE'
		}
	]);
	const plateList = [{
			text: '订单排行',
			img: `${base.PHPimgUrl}bill.png`,
			link: '/subpages/pages/home/orderRanking'
		},
		{
			text: '最新爆品',
			img: `${base.PHPimgUrl}happy.png`,
			link: '/subpages/pages/home/latestExplosive'
		},
		{
			text: '达人榜单',
			img: `${base.PHPimgUrl}ranking.png`,
			link: '/subpages/pages/home/talentList'
		},
		{
			text: '团长高佣',
			img: `${base.PHPimgUrl}crown.png`,
			link: '/subpages/pages/home/highCommission'
		}
	];
	let timeState = uni.getStorageSync('timeState') || '1';
	const times = ref([{
			label: '付款时间',
			active: true,
			value: '1'
		},
		{
			label: '结算时间',
			active: false,
			value: '2'
		}
	]);
	//用户是否浏览过
	const visited = ref(false);
	//是否显示提示弹窗
	const isHint = ref(false);
	onReady(() => {
		orderArr.value.forEach((i) => (i.active = i.value === orderStatus));
		times.value.forEach((i) => (i.active = i.value === timeState));
	});
	onLoad(() => {
		visited.value = uni.getStorageSync('visited');
		console.log('🚀  首页userInfo_Store.isLogin:', userInfo_Store.isLogin)
		//以用户身份进入
		if (userInfo_Store.isLogin && visited.value) {
			isHint.value = false;
		} else {
			isHint.value = true;
		}
	});
	onShow(() => {
		paging.pageNum = 1;
		getOderLisat(true);
		loadData();
		isGoods.value = uni.getStorageSync('isGoods');
		isStore.value = uni.getStorageSync('isStore');
	});
	onReachBottom(() => {
		if (!loading) {
			loading = true;
			paging.pageNum++;
			getOderLisat(true);
		}
	});
	//销售数据
	const statInfo = ref({});
	//订单数据
	const orderList = ref([]);
	const isGoods = ref(uni.getStorageSync('isGoods') || false);
	const isStore = ref(uni.getStorageSync('isStore') || false);
	/**
	 * 加载订单 flag 是否加载下一页
	 */
	const getOderLisat = async (flag) => {
		try {
			const res = await api.getOrderList_API({
				...paging,
				type: chooseType.value,
				dyAccountAuthId: userInfo_Store.userInfo.id,
				flowPoint: orderStatus === 'all' ? '' : orderStatusx,
				orderType: timeState.value
			});
			if (res.code === 10000) {
				if (paging.pageNum === 1) {
					orderList.value = [];
				}
				const list = res.data.result.map((item) => {
					return {
						...item,
						isGoods: isGoods.value,
						isStore: isStore.value
					};
				});
				if (flag) {
					orderList.value = orderList.value.concat(list);
				} else {
					orderList.value = list;
				}
			}
		} catch (error) {
			console.error(error);
		}
	};
	/**
	 * 获取销售数据
	 */
	const loadData = async () => {
		const res = await api.getOrderState_API({
			type: chooseType.value,
			dyAccountAuthId: userInfo_Store.userId
		});
		if (res.code === 10000) {
			statInfo.value = res.data.result;
		}
	};
	/**
	 * 切换日期
	 */
	const handleCheckdTime = (val, index) => {
		currentTab.value = index;
		chooseType.value = val;
		paging.pageNum = 1;
		getOderLisat(false);
		loadData();
	};
	const handleHint = () => {
		if (userInfo_Store.isLogin && !visited.value) {
			uni.setStorageSync('visited', true);
		}
		isHint.value = false;
	};
	// 重置
	const handleReset = () => {
		timeState = '1';
		orderStatus = 'all';
		//清空用户信息
		// userInfo_Store.GetUserInfo({});
		uni.setStorageSync('timeState', timeState);
		uni.setStorageSync('orderStatus', orderStatus);
		paging.pageNum = 1;
		getOderLisat(false);
		orderArr.value.forEach((i) => {
			i.active = i.value === orderStatus;
		});
		times.value.forEach((i) => {
			i.active = i.value === timeState;
		});
		filtrate.value = false;
	};
	// 确定
	const handleConfirm = () => {
		paging.pageNum = 1;
		getOderLisat(false);
		filtrate.value = false;
	};
	// 选择时间
	const handleTimes = (index) => {
		timeState = times.value[index].value;
		uni.setStorageSync('timeState', timeState);
		times.value.forEach((btn, i) => {
			btn.active = i === index;
		});
	};
	// 选择订单状态
	const handleOrderState = (index) => {
		orderStatus = orderArr.value[index].value;
		uni.setStorageSync('orderStatus', orderStatus);
		orderArr.value.forEach((btn, i) => {
			btn.active = i === index;
		});
	};
	// 跳转账号
	const handleAccount = () => {
		// let that = this;
		// uni.$on('chooseAccount',(item) => {

		// })
		// this.$eventHub.$on('chooseAccount', function (item) {
		// 	that.userInfo = item
		// 	that.userId = item.id;
		// 	//清除监听，不清除会消耗资源
		// 	that.$eventHub.$off('chooseAccount');
		// });
		uni.navigateTo({
			url: '/subpages/pages/home/chooseAccount'
		});
	};
	// 跳转商品详情
	const handleShopDetail = (row) => {
		uni.navigateTo({
			url: '/pages/selection/shopDetails?goodsId=' + row.pid
		});
	};
	// 商品信息显隐
	const handleGoodsToggle = (item, key, name) => {
		if (name === 'goods') {
			const flag = orderList.value.some((i) => i.isGoods);
			orderList.value.map((i) => {
				i.isGoods = !flag;
			});
			uni.setStorageSync('isGoods', !flag);
		} else {
			const flag = orderList.value.some((i) => i.isStore);
			orderList.value.map((i) => {
				i.isStore = !flag;
			});
			uni.setStorageSync('isStore', !flag);
		}
	};
	// 跳转板块
	const handleSkip = (url) => {
		console.log("url" + url)
		uni.navigateTo({
			url
		});
	};
</script>

<style scoped>
	.main {
		min-height: 100vh;
	}

	.main_top {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 997;
		width: 100%;
		background: linear-gradient(360deg, #9DA6F1 0%, #7F7FE9 100%)
	}

	.main_top_logo {
		display: flex;
		align-items: center;
		height: 88rpx;
	}

	.main_top_logo image {
		width: 126rpx;
		height: 36rpx;
		margin-left: 24rpx;
	}

	.main_time {
		display: flex;
		align-items: center;
		height: 84rpx;
	}

	.main_time_left {
		flex: 1;
		padding: 24rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 16rpx;
	}

	.main_time_left_item {
		display: inline-block;
		text-align: center;
		color: #E0E2FA;
		font-family: MiSans-Regular, MiSans;
		font-size: 26rpx;
	}

	.active {
		color: #fff;
	}

	.main_time_right {
		display: flex;
		align-items: center;
		flex: 0.28;
		color: #E0E2FA;
	}

	.time_right_text {
		margin: 4rpx 12rpx 0 36rpx;
		font-size: 26rpx;
	}

	.time_right_img {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
	}

	.main_card {
		padding: 28rpx 0;
		background: linear-gradient(360deg, #9DA6F1 0%, #7F7FE9 100%);
	}

	.main_body {
		position: relative;
		top: -20rpx;
		left: 0;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		padding-top: 48rpx;
	}

	.main_plate {
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx 48rpx;
	}

	.main_plate_item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: calc(25% - 10px);
	}

	.main_plate_img {
		width: 76rpx;
		height: 76rpx;
		margin-bottom: 16rpx;
	}

	.main_plate_text {
		font-size: 26rpx;
		color: #333;
	}


	.main_list {
		background-color: #FAFAFA;
		padding: 24rpx 24rpx 14rpx;
		margin-bottom: 16rpx;
	}

	.main_list_top {
		display: flex;
	}

	.main_list_top .left {
		width: 156rpx;
		height: 156rpx;
		margin-right: 24rpx;
	}

	.main_list_top .left_img {
		width: 156rpx !important;
		height: 156rpx;
		border-radius: 8rpx;
	}

	.main_list_top .right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}

	.main_list_top .right_title {
		display: flex;
		justify-content: space-between;
	}

	.main_list_top .right_title .text {
		width: 478rpx;
		font-size: 26rpx;
		color: #333;
		font-family: .PingFang SC, PingFang SC;
	}

	.main_list_top .right_title .img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}

	.main_list_top .right_content .time {
		display: block;
		font-size: 22rpx;
		color: #999999;
		margin-bottom: 8rpx;
	}

	.main_list_top .tags {
		display: flex;
		align-items: center;
	}

	.main_list_top .tags_item {
		height: 40rpx;
		line-height: 40rpx;
		padding: 4rpx 16rpx;
		margin-right: 12rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
	}

	.main_list_center {
		display: flex;
		align-items: center;
		height: 48rpx;
		background-color: #E8E8F8;
		padding: 8rpx 0 8rpx 16rpx;
		border-radius: 8rpx;
		margin: 16rpx 0;
	}

	.main_list_center .list_item {
		display: flex;
	}

	.main_list_center .list_item .img {
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
	}

	.main_list_center .list_item .text {
		font-size: 22rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #A9A9EF;
		margin: 0 8rpx 0 2rpx;
	}

	.main_list_center .list_item .money {
		font-size: 22rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #7F7FE9;
	}

	.main_list_bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.main_list_bottom .left {
		display: flex;
		align-items: center;
	}

	.main_list_bottom .left .img {
		width: 40rpx !important;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.main_list_bottom .left .text {
		font-size: 26rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #333;
	}

	.main_list_bottom .right {
		width: 32rpx;
		height: 32rpx;
	}

	.main_list_bottom .right .img {
		width: 32rpx;
		height: 32rpx;
		display: block;
		margin-top: 5rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 998;
	}

	.mask_body {
		position: relative;
		top: 14%;
		left: 0;
		background: #9DA6F1;
		padding: 24rpx 24rpx 0;
		z-index: 9999;
	}

	.mask_body_title {
		font-size: 24rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #FFF;
		margin: 24rpx 0 16rpx;
	}

	.mask_body_line {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2);
		gap: 26rpx;
		margin-bottom: 40rpx;
	}

	.mask_body_line .btn {
		text-align: center;
		border-radius: 8rpx;
		border: 2rpx solid #D8DBF9;
		font-size: 24rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #D8DBF9;
		padding: 6rpx 0 8rpx 0;
	}

	.mask_body_line .active {
		background-color: #B1B8F4;
		color: #FFF;
		border: 2rpx solid #fff;
	}

	.mask_body_name {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.mask_body_name .left {
		font-size: 24rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #FFF;
	}

	.mask_body_name .right {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: .PingFang SC, PingFang SC;
		color: #FFF;
	}

	.mask_body_name .right .img {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		margin-left: 8rpx;
	}

	.mask_body_name .right .avatar {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	.mask_body_btns {
		display: flex;
		justify-content: space-between;
		padding-bottom: 40rpx;
	}

	.mask_body_btns .btn {
		text-align: center;
		font-size: 24rpx;
		font-family: .PingFang SC, PingFang SC;
		background-color: #BAC1F5;
		color: #Fff;
		padding: 6rpx 88rpx 8rpx;
		border-radius: 8rpx;
	}

	.mask_body_btns .active {
		font-size: 24rpx;
		font-family: .PingFang SC, PingFang SC;
		background-color: #fff;
		color: #7F7FE9;
		padding: 6rpx 194rpx 8rpx 208rpx;
	}

	.bottom-no-login {
		background: rgba(153, 153, 153, 0.85);
		border-radius: 200px;
		height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		position: fixed;
		z-index: 111;
		width: 91.4vw;
		margin-left: 4.3vw;
		margin-right: 4.3vw;
		margin-bottom: 36rpx;
	}

	.no-data {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		color: #999;
		font-size: 22rpx;
	}

	.no-data image {
		width: 540rpx;
		height: 510rpx;
		margin-top: 148rpx;
		margin-bottom: 32rpx;
	}

	.mask_warpper {
		position: relative;
		top: 28%;
		left: 0;
		background: #fff;
		margin: 0 76rpx 0 76rpx;
		border-radius: 32rpx;
		height: 850rpx;
	}

	.mask_body_top {
		position: absolute;
		top: -16%;
		left: 0;
		width: 100% !important;
		height: 330rpx;
	}

	.mask_body_bg {
		position: absolute;
		top: 12%;
		left: 0;
		width: 100% !important;
	}

	.mask_body_btn {
		position: absolute;
		bottom: 6%;
		left: 50%;
		transform: translateX(-50%);
		width: 300rpx;
		height: 68rpx;
		background: #F2F2FD;
		color: #7F7FE9;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		font-family: PingFang SC, PingFang SC;
	}
</style>